!!!
- year = [20, 21]
- semester = 1
%html
  %head
    %meta(charset="UTF-8")/
    %title 之江学院考试
    %link(rel="stylesheet" type="text/css" href="exam.css")/

  %body
    %h1 
      浙江工业大学之江学院20 #{year[0]} /20 #{year[1]} 学年
      %br/
      第 #{semester} 学期试卷

    %table.name(width="100%")
      %tr
        %td(colspan="2")  
          课程
          %span.filling2
        %td(colspan="2")
          班级
          %span.filling2
      %tr
        %td
          姓名
          %span.filling1
        %td(colspan="2")
          学号
          %span.filling2
        %td
          教师姓名
          %span.filling1

    %table.score(width="85%" border=1 rules="all")
      %tr
        %th 题序
        %td 一
        %td 二
        %td 三
        %td 四
        %td 五
        %td 总分
      %tr
        %th 计分
        %td
        %td
        %td
        %td
        %td
        %td
    %br/
    .page1
      %h2 填空题(40分)
      %ol
        %li
          根据标签是否成对出现，HTML标签分为：
          %span.filling
          、
          %span.filling
          。
        %li
          写出两个常见的HTML标签属性：
          %span.filling
          、
          %span.filling
          。
        %li
          %span.filling
          是和流动相对的概念。可用来实现文字围绕效果。
        %li
          HTML代码
          %xmp.code <div><span class="head">入</span>夜渐微凉 繁花落地成霜</div>
          中, 标签
          %span.filling
          继承标签
          %span.filling
          的样式。
        %li
          若用类名定位网页元素
          %xmp.code <p id="adgy" class="song">把你捧在手上 虔诚地焚香</p>
          则选择器为
          %span.filling
          。
        %li
          当同一个网页元素被两组不同的CSS声明语句渲染时，根据选择器的
          %span.filling
          来选择最终使用的CSS样式。
        %li
          网页中每个元素根据
          %span.filling
          模型显示。构成这个模型的四大要素：
          %span.filling
          、
          %span.filling
          、
          %span.filling
          、
          %span.filling
          。
        %li
          CSS 代码应该写在标签
          %span.filling
          里，引用外部css文件要写在标签
          %span.filling
          里，而嵌入到HTML标签中，可设置属性
          %span.filling
          。
        %li
          写出三种常用 DOM 节点访问方法：
          %span.filling
          、
          %span.filling
          、
          %span.filling
          。
      %h2 判断题 (20分)
      %ol
        %li
          行内元素通常无法调整高宽，而块状元素可以。
          %span.parenthesis
            %span.yes_no
        %li
          浏览器窗口X-Y轴和解析几何中的X-Y轴方向一致。
          %span.parenthesis
            %span.yes_no
        %li
          默认设置下，背景色一般正好覆盖到盒模型的内边距部分。
          %span.parenthesis
            %span.yes_no
        %li
          JavaScript 用 script 标签导入外部文件。
          %span.parenthesis
            %span.yes_no
        %li
          盒子模型只在设置背景图片的情况下才存在。
          %span.parenthesis
            %span.yes_no
        %li
          定位时，子元素可能会超出父元素的显示范围。
          %span.parenthesis
            %span.yes_no
        %li
          列表中列表项总是独立成一段显示，说明列表项是块状元素。
          %span.parenthesis
            %span.yes_no
        %li
          设置浮动效果的元素不能直接影响其父元素以外的元素。
          %span.parenthesis
            %span.yes_no
        %li
          默认情况下，标签 body 中的JavaScript代码是在当前位置执行，但可以操作HTML任何已经加载好的元素。
          %span.parenthesis
            %span.yes_no
        %li
          DOM中的元素节点大体上和HTML的标签一一对应。
          %span.parenthesis
            %span.yes_no
    %footer
    %br/
    %header 浙江工业大学之江学院考试命题纸
    .page
      %h2 选择题(20分)
      %ol
        %li
          HTML标签可分为哪两种标签？
          %span.parenthesis
            %span.choice
          %ol(type="A")
            %li 空标签和非空标签
            %li 闭标签和开标签
            %li 闭合标签和空标签
            %li 双标签和单标签
        %li
          网页根标签是
          %span.parenthesis
            %span.choice
          %ol(type="A")
            %li 
              %xmp <html>
            %li
              %xmp <head>
            %li
              %xmp <body>
            %li
              %xmp <meta>
        %li
          CSS实现的是什么功能？
          %span.parenthesis
            %span.choice
          %ol(type="A")
            %li 内容和样式分离
            %li 内容和资源分离
            %li 内容和源代码分离
            %li 内容和数据分离
        %li
          应用下述样式的效果为：
          %span.parenthesis
            %span.choice
          %xmp.code<
            p {color:red;}
            span {font-size: large;
            font-weight: bold;}
            <p>
            <span>春</span>眠不觉晓，处处闻啼鸟。 夜来风雨声，花落知多少。
            </p>
          %ol(type="A")
            %li 
              %xmp 整首诗红色、加粗、放大
            %li 
              %xmp 整首诗红色，第一个字加粗、放大
            %li 
              %xmp 整首诗红色，第一个字加粗、放大但不是红色
            %li 
              %xmp 第一个字加粗、放大；其他字默认字体
        %li
          能精确定位到“秦”字的选择器是
          %span.parenthesis
            %span.choice
          %xmp.code
            <div>
            <span class="head">秦</span>
            <span class="tail">时明月汉时关,万里长征人未还。但使龙城飞将在,不教胡马度阴山。
            </span>
            </div>
          %ol(type="A")
            %li 
              %xmp span
            %li 
              %xmp div span
            %li 
              %xmp div .head
            %li 
              %xmp div span .head
    %footer
    %br/
    %header 浙江工业大学之江学院考试命题纸
    .page
      %ol(start="6")
        %li
          JavaScript实现的是什么功能？
          %span.parenthesis
            %span.choice
          %ol(type="A")
            %li 内容和样式分离
            %li 内容和特效和互动功能的分离
            %li 内容和资源分离
            %li 内容和数据分离
        %li
          下面哪个选择器的声明语句无法影响“独”字？
          %span.parenthesis
            %span.choice
          %xmp.code<
            <div>
            <span class="title">《鹿柴》[唐] 王维</span>
            <p>
            <span class="head">空</span>
            <span>山不见人，但闻人语响。 返影入深林，复照青苔上。</span>
            </p>
            </div>
          %ol(type="A")
            %li 
              %xmp div .head
            %li 
              %xmp p>span
            %li 
              %xmp div>span
            %li 
              %xmp .title, .head
        %li
          经常逛淘宝的同学知道，不用点击菜单，只要鼠标滑过菜单时，
          就会显示一些隐藏的商品信息或高亮一些暗淡的文字。
          %br/
          这主要是通过什么实现的？
          %span.parenthesis
            %span.choice
          %ol(type="A")
            %li 设置text-decoration等文本修饰属性
            %li JavaScript动态特效
            %li CSS动画特效
            %li 设置鼠标悬停伪选择器
        %li
          B 站主页导航栏其实是一个无序列表。为什么这个无序列表不是纵向排列，而是横向排列？
          %span.parenthesis
            %span.choice
          %ol(type="A")
            %li CSS样式文件丢失
            %li 浮动效果
            %li B站服务器故障
            %li 浏览器故障
        %li
          浏览器解析下面的HTML代码，会有什么特效
          %span.parenthesis
            %span.choice
          %xmp.code
            <h1>修改字母</h1>
            <span>A</span>

            <script type='text/javascript'>
            spans[0].innerText = 'B'
            spans = document.getElementsByTagName('span')
            function f(){
            spans[0].innerText = 'C'
            }
            span.onclick = f
            </script>
          %ol(type="A")
            %li 有特效，鼠标点击字母A变成C
            %li 有特效，鼠标点击字母B变成C
            %li 没有特效，显示字母B
            %li 没有特效，显示两个字母AB

    %footer
    %br/
    %header 浙江工业大学之江学院考试命题纸
    .page
      %h2 简答题(20分)
      %ol
        %li
          下面是一段诗。准备一张图片，如poem.jpg。给这断文字添加背景图片，文字在图片中居中，合理控制上下边距。
          %xmp.code
            <div class='poem'>
            我总是想些无关紧要的事<br/>
            比如宇宙的目的，熬夜与猝死的关系<br/>
            你是否曾爱我
            </div>
          .solve
            %xmp.code
              - (1..12).each do |i|
                = i
        %li 
          下面是一段文章。标题居中加粗；第一个词放大到3倍，加粗，其余文字环绕。(8分)
          %xmp.code
            <article>
            <div class="title">荷塘月色</div>
            <address>朱自清</address>
            <p>
            <span class="head">月</span>光如流水一般，静静地泻在这一片叶子和花上。
            薄薄的青雾浮起在荷塘里。
            叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。
            虽然是满月，天上却有一层淡淡的云，所以不能朗照；
            但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。
            月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；
            弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。
            塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲上奏着的名曲。
            </p>
            </article>
          .solve
            %xmp.code
              - (1..15).each do |i|
                = i
    %footer
    %br/
    %header 浙江工业大学之江学院考试命题纸
    .page
      %ol(start="3")
        %li
          下面是B站首页导航栏列表（已经简化）。已知这是文档节点中第一个无序列表节点。怎样能合理地把“游戏中心”改为“学习资料”？
          %xmp.code
            <ul>
            <li>主站</li>
            <li>番剧</li>
            <li>游戏中心</li>
            <li>直播</li>
            <li>会员购</li>
            </ul>
          .solve
            %xmp.code
              - (1..12).each do |i|
                = i
    %footer